<template>
  <div class="clientType">
    <div class="title-container">
      <div class="left-box">
        <el-form ref="form" :model="searchForm" class="formClass">
          <el-form-item>
            <el-input
              prefix-icon="el-icon-search"
              type="input"
              placeholder="请输入项目名称"
              v-model="searchForm.searchInput"
            />
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="searchForm.searchSelectValue"
              placeholder="请选择项目类型"
              @change="selectChange"
            >
              <el-option
                v-for="item in projectTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="searchForm.date"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :value-format="formatDate"
            />

            <!--   @change="dateChange" -->
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="searchClick">搜索</el-button>
      </div>
    </div>
    <global-card>
      <template #leftTitle>
        <el-button type="success" icon="el-icon-refresh" @click="refresh"
          >刷新</el-button
        >
      </template>
      <template #content>
        <el-table
          v-loading="loading"
          :data="tableData"
          border
          style="width: 100%"
          class="elTable"
          ref="tableRef"
        >
          <el-table-column
            type="index"
            label="序号"
            width="80"
            align="center"
          />
          <el-table-column
            prop="customerName"
            label="所属客户"
            align="center"
          />
          <el-table-column prop="projectName" label="项目名称" align="center" />

          <el-table-column prop="recipient" label="接收人" align="center" />
          <el-table-column
            prop="recipientPhone"
            label="接收电话"
            align="center"
          />

          <el-table-column label="发送日期" align="center" prop="createTime">
            <template slot-scope="scope">
              {{ scope.row.createTime }}
            </template>
          </el-table-column>
          <el-table-column prop="smsDes" label="短信内容" align="center" />

          <el-table-column label="操作" width="100" align="center">
            <template #default="{ row }">
              <el-button type="primary" size="mini" @click="handlerDetails(row)"
                >详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
      <template #footer>
        <pagination
          class="pagination"
          :total="count"
          :page.sync="pageIndex"
          :limit.sync="pageSize"
          @pagination="pagination"
        />
      </template>
    </global-card>

    <yc-dialog
      ref="ycDialog"
      :dialogTitle="dialogTitle"
      :centerTitle="dialogCenterTitle"
    >
      <template #content>
        <div class="dialog-content">
          <el-form :model="newSmsModel" label-width="100px">
            <el-form-item label="短信包名称">
              <el-input
                v-model="newSmsModel.projectName"
                :disabled="detailsDisabled"
              />
            </el-form-item>

            <el-form-item label="所属客户">
              <el-input
                v-model="newSmsModel.customerName"
                :disabled="detailsDisabled"
              />
            </el-form-item>
            <el-form-item label="接收人">
              <el-input
                v-model="newSmsModel.recipient"
                :disabled="detailsDisabled"
              />
            </el-form-item>

            <el-form-item label="接受电话">
              <el-input
                v-model="newSmsModel.recipientPhone"
                :disabled="detailsDisabled"
              />
            </el-form-item>
            <el-form-item label="短信描述">
              <el-input
                v-model="newSmsModel.smsDes"
                :disabled="detailsDisabled"
              />
            </el-form-item>
          </el-form>
        </div>
      </template>
      <template #footer>
        <el-button type="primary" @click="dialogSave">确定</el-button>
        <el-button @click="$refs.ycDialog.dialogVisible = false"
          >取消
        </el-button>
      </template>
    </yc-dialog>

    <global-message
      v-if="isGlobalMessageShow"
      @receive="receive"
      :message="message"
    />
  </div>
</template>

<script>
import { querySmsPackage } from "@/api/clientOrObject/onte"
import ycDialog from "@/components/pageDialog"
export default {
  data() {
    return {
      tableData: [],
      formatDate: "yyyy-MM-dd",
      count: 0,
      projectTypeOptions: [
        {
          label: "私人客户",
          value: "私人客户"
        },
        {
          label: "高能耗客户",
          value: "高能耗客户"
        },
        {
          label: "学校客户",
          value: "学校客户"
        }
      ],
      searchOptions: [
        {
          label: "顾清曦",
          value: "gqx"
        }
      ],
      searchForm: {
        searchInput: "",
        searchSelectValue: "",
        date: ""
      },
      newSmsModel: {
        projectName: "",
        customerName: "",
        recipient: "",
        recipientPhone: "",
        smsDes: "",
        id: ""
      },
      detailsDisabled: false,
      isGlobalMessageShow: false,

      dialogCenterTitle: "",
      dialogTitle: "",
      message: "",
      pageIndex: 1,
      pageSize: 20,
      loading: false
    }
  },
  components: {
    ycDialog
  },
  created() {
    this.getPageProject()
  },
  methods: {
    async getPageProject(pageIndex = 1, pageSize = 20, tableInfo = {}) {
      this.loading = true
      // projectType
      const { searchInput, searchSelectValue, date } = tableInfo
      const { object } = await querySmsPackage({
        pageIndex,
        pageSize,
        customerCode: this.customerCode,
        projectName: searchInput,
        projectType: searchSelectValue,
        startTime: date && date[0],
        endTime: date && date[1]
      })
      console.log(object)
      this.count = object.count
      this.tableData = object.data
      this.loading = false
    },

    /**
     * 详情按钮
     */
    handlerDetails(row) {
      this.$refs.ycDialog.dialogVisible = true
      this.dialogCenterTitle = "短信基本信息"
      this.dialogTitle = "短信包详情"
      this.detailsDisabled = true
      this.newSmsModel.projectName = row.projectName
      this.newSmsModel.customerName = row.customerName
      this.newSmsModel.recipient = row.recipient
      this.newSmsModel.recipientPhone = row.recipientPhone
      this.newSmsModel.smsDes = row.smsDes
    },
    async searchClick() {
      this.getPageProject(1, 20, this.searchForm)
      console.log(this.searchForm)
    },
    async dialogSave() {
      this.$refs.ycDialog.dialogVisible = false
      if (this.detailsDisabled) {
        // 详情
        this.$refs.ycDialog.dialogVisible = false
      }
      this.getPageProject()
    },
    receive() {
      this.isGlobalMessageShow = false
    },
    dateChange(dateItem) {
      console.log(dateItem, this.searchForm)
    },

    selectChange() {
      console.log("aaa")
    },
    pagination(pageItem) {
      this.getPageProject(pageItem.page, pageItem.limit)
    },
    refresh() {
      Object.keys(this.searchForm).forEach((item) => {
        this.searchForm[item] = ""
      })
      this.getPageProject()
    }
  }
}
</script>
<style lang="scss" scoped>
.clientType {
  .title-container {
    display: flex;
    justify-content: flex-end;
    margin-right: 20px;

    .left-box {
      display: flex;

      .formClass {
        display: flex;
        margin-right: 20px;
        .el-form-item {
          margin-top: 20px;
          margin-bottom: 0;
          .el-input {
            width: 216px;
          }
          .el-select {
            width: 171px;
            margin-left: 10px;
          }
          .el-date-editor {
            width: 336px;
            margin-left: 10px;
          }
        }
      }
      .el-button {
        // width: 42px;
        height: 36px;
        margin-top: 20px;
      }
    }
  }
}
</style>
